<template>
  <div class="myContailer">
    <!-- <el-row class="myTitleBorderBottom">
      <el-col :span="20" class="myLineHeight_40px">
        <span v-if="type=='add'">新增房间</span>
        <span v-if="type=='update'">编辑房间</span>
        <span v-if="type=='info'">房间详情</span>
      </el-col>
    </el-row> -->
    <!-- <el-row>
      <el-col style="text-align: right;">
        <el-button class="myBgGreen">添 加</el-button>
      </el-col>
    </el-row> -->
    <el-row class="myMarginTop_10px">
      <template>
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
              <el-row class="myMarginTop_10px" :gutter="10">
                <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                  <span class="require myVA_M">*</span> 所属片区 :
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="districtSelected">
                    <el-select v-model="ruleForm.districtSelected"
                      @visible-change="clickDistrictSelect"
                      @change="changeDistrictSelect"
                     :disabled="is_disabled"
                      placeholder="请选择片区">
                      <el-option
                        v-for="item in districtList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="myMarginTop_10px" :gutter="10">
                <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                  <span class="require myVA_M">*</span> 所属小区 :
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="areaSelected">
                    <el-select v-model="ruleForm.areaSelected"
                     @visible-change="clickAreaSelect"
                     @change="changeAreaSelect"
                     :disabled="is_disabled"
                      placeholder="请选择小区">
                      <el-option
                        v-for="item in areaList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="myMarginTop_10px" :gutter="10">
                <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                  <span class="require myVA_M">*</span> 所属楼栋 :
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="buildingSelected">
                    <el-select v-model="ruleForm.buildingSelected"
                      @visible-change="clickBuildingSelect"
                      @change="changeBuildingSelect"
                      :disabled="is_disabled"
                      placeholder="请选择楼栋">
                      <el-option
                        v-for="item in buildingList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="myMarginTop_10px" :gutter="10">
                <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                  <span class="require myVA_M">*</span> 所属单元 :
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="cellSelected">
                    <el-select v-model="ruleForm.cellSelected"
                      @visible-change="clickCellSelect"
                      :disabled="is_disabled"
                      placeholder="请选择单元">
                      <el-option
                        v-for="item in cellList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="myMarginTop_10px" :gutter="10">
                <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                  <span class="require myVA_M">*</span> 所属楼层 :
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="floorSelected">
                    <el-select v-model="ruleForm.floorSelected"
                      @visible-change="clickFloorSelect"
                      :disabled="is_disabled"
                      placeholder="请选择楼层">
                      <el-option
                        v-for="item in floorList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="myMarginTop_10px" :gutter="10">
                <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                  <span class="require myVA_M">*</span> 房间用途 :
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="purposeSelected">
                    <el-select v-model="ruleForm.purposeSelected"
                      :disabled="is_disabled"
                      placeholder="请选择用途">
                      <el-option
                        v-for="item in purposeList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="myMarginTop_10px" :gutter="10">
                <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                  <span class="require myVA_M">*</span> 房间名称 :
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="room_name">
                    <el-input v-model="ruleForm.room_name" placeholder="请输入房间名称" :readonly="is_modifly"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="myMarginTop_10px" :gutter="10">
                <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                  <span class="require myVA_M">*</span> 房间编号 :
                </el-col>
                <el-col :span="7">
                  <el-form-item prop="room_no">
                    <el-input v-model="ruleForm.room_no" placeholder="请输入小区编号" :readonly="is_modifly"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="myMarginTop_10px" :gutter="10">
                <el-col :span="3" class="myTextAlignRight myLineHeight_40px">
                  备注 :
                </el-col>
                <el-col :span="7">
                  <el-input type="textarea" :readonly="is_modifly" v-model="ruleForm.extra_desc" placeholder="备注"></el-input>
                </el-col>
              </el-row>
              <el-row class="myMarginTop_10px" :gutter="10">
                <el-col :span="10" :offset="3">
                  <el-button v-if="type=='add'" @click="create('ruleForm')" class="myBgGreen">新 增</el-button>
                  <el-button v-if="type=='update' && isShow(124)" @click="modify('ruleForm')" class="myBgGreen">保 存</el-button>
                  <el-button @click="onBack">关 闭</el-button>
                </el-col>
              </el-row>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="住户信息" name="second"  v-if="type!='add'">
            <el-row style="padding-bottom: 10px" v-if="type=='update'">
              <el-col>
                <el-button class="myBgGreen" @click="showUser">添 加</el-button>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-table
                  ref="multipleTable"
                  v-loading="loading"
                  :data="list"
                  :border = true
                  :stripe = true>
                  <el-table-column
                    type="index"
                    label="序号"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="user_name"
                    label="住户姓名">
                  </el-table-column>
                  <el-table-column
                    prop="phone"
                    label="电话号码">
                  </el-table-column>
                  <el-table-column
                    prop="user_type"
                    width="100"
                    label="身份标识">
                    <template scope="scope">
                      <span>{{scope.row.user_type | userType}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="sex"
                    label="性别">
                    <template scope="scope">
                      <span v-if="scope.row.sex==1">男</span>
                      <span v-else-if="scope.row.sex==0">女</span>
                      <span v-else>-</span>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="card_no"
                    label="身份证号">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    v-if="type=='update'"
                    width="150">
                    <template scope="scope">
                      <el-button class="look" type="text" size="small" @click="ondeleteResident(scope.row.user_id)">移除</el-button> |
                      <el-button class="look" type="text" size="small" @click="showdialog(scope.row.user_id)">编辑住户信息</el-button> 
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="10">
                <el-button @click="onBack">关 闭</el-button>
              </el-col>
            </el-row>
          </el-tab-pane>
          <!-- <el-tab-pane label="业主信息" name="third">
            <el-row>
              <el-col style="text-align: right;">
                <el-button class="myBgGreen">添 加</el-button>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px">
              <el-col :span="24">
                <el-table
                  ref="multipleTable"
                  v-loading="loading"
                  :data="list"
                  :border = true
                  :stripe = true>
                  <el-table-column
                    type="index"
                    label="序号"
                    width="100">
                  </el-table-column>
                  <el-table-column
                    prop="district_name"
                    label="业主姓名">
                  </el-table-column>
                  <el-table-column
                    prop="district_name"
                    label="性别">
                  </el-table-column>
                  <el-table-column
                    prop="district_name"
                    label="电话号码">
                  </el-table-column>
                  <el-table-column
                    prop="district_name"
                    label="身份证号">
                  </el-table-column>
                  <el-table-column
                    label="操作"
                    width="120">
                    <template scope="scope">
                      <el-button class="look" type="text" size="small">编辑</el-button> |
                      <el-button class="look" type="text" size="small">删除</el-button> 
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
            <el-row class="myMarginTop_10px" :gutter="10">
              <el-col :span="10">
                <el-button @click="onBack">关 闭</el-button>
              </el-col>
            </el-row>
          </el-tab-pane> -->
        </el-tabs>
      </template>
    </el-row>

    <el-dialog
      title="编辑住户信息"
      :visible.sync="dialogVisible"
      width="30%">
      <el-row>
        <el-col :span="4" class="myLineHeight_40px">
          <span class="require">*</span>
          用户姓名:
        </el-col>
        <el-col :span="20">
          <el-input placeholder="输入用户姓名" v-model="userDetail.user_name"></el-input>
        </el-col>
      </el-row>
      <el-row class="myMarginTop_10px">
        <el-col :span="4" class="myLineHeight_40px">
          <span class="require">*</span>
          电话号码:
        </el-col>
        <el-col :span="20">
          <el-input placeholder="输入电话号码" v-model="userDetail.phone"></el-input>
        </el-col>
      </el-row>
      <el-row class="myMarginTop_10px">
        <el-col :span="4" class="myLineHeight_40px">
          <span class="require">*</span>
          用户类型:
        </el-col>
        <el-col :span="20">
          <el-select 
            v-model="userDetail.resident_type"
            clearable
            placeholder="选择用户类型">
            <el-option
              v-for="item in userTypeList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <el-row class="myMarginTop_10px">
        <el-col :span="4" class="myLineHeight_40px">
          性别:
        </el-col>
        <el-col :span="20" class="myLineHeight_40px">
          <template>
            <el-radio-group v-model="userDetail.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
            </el-radio-group>
          </template>
        </el-col>
      </el-row>
      <el-row class="myMarginTop_10px">
        <el-col :span="4" class="myLineHeight_40px">
          身份证号
        </el-col>
        <el-col :span="20">
          <el-input placeholder="输入身份证号" v-model="userDetail.card_no"></el-input>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onupdateUser">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog title="添加住户" class="myRoleDialog" :visible.sync="personLiableDialog" >
      <el-row :gutter="10">
        <el-col :span="20">
          <el-input placeholder="输入姓名进行检索" v-model="r_kw"></el-input>
        </el-col>
        <el-col :span="4" class="myTextAlignRight">
          <el-button type="primary" class="myBgGreen" @click="onSearchExaminer">查询</el-button>
        </el-col>
      </el-row>
      <div class="myPaddingTop_10px">
        <el-tree
          class="myOV_y_400px" 
          ref="dutyDlg"
          v-loading="dutyDlgListLoading"
          node-key="user_id"
          :data="dutyDlgList"
          :props="dutyDlgProps" 
          @check-change="onChange"
          :render-content="renderContent"
          show-checkbox>
        </el-tree>
      </div>
      <div class="myPaddingTop_10px">
        添加为：
        <template>
          <el-radio-group v-model="user_type2">
            <el-radio :label="1">业主</el-radio>
            <el-radio :label="2">家人</el-radio>
            <el-radio :label="4">租客</el-radio>
          </el-radio-group>
        </template>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="personLiableDialog = false">取 消</el-button>
        <el-button type="primary" class="myBgGreen" @click="onAssignSub">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
  .myContailer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myOV_y_400px{
    max-height: 400px;
    overflow-y:scroll;
    border:1px solid #f2f2f2; 
  }
  .myPaddingTop_10px{
    padding-top: 10px;
  }
</style>
<script>
  import { purposeList, getRoomDetail, modifyRoom, createRoom , getResidentList , deleteResident , updateUser , addUser , getUserDetail} from '@/api/room';
  import { getUserInfo } from '@/api/staff';
  import { getFloorList } from '@/api/floor';
  import { getCellList } from '@/api/cell';
  import { getBuildingList } from '@/api/building';
  import { getAreaList, getDistrictList } from '@/api/area';
  export default {
    data(){
      return{
        title: "房间管理",
        id: null,
        detail: {},

        purposeSelected: '',
        purposeList: purposeList,

        type:'',
        loading: false,
        is_modifly:true,
        is_disabled:false,

        districtList: [],
        districtLoaded: false,
        districtSelected: null,

        areaList: [],
        areaLoaded: false,
        areaSelected: null,

        buildingList: [],
        buildingLoaded: false,
        buildingSelected: null,

        cellList: [],
        cellLoaded: false,
        cellSelected: null,

        floorList: [],
        floorLoaded: false,
        floorSelected: null,

        ruleForm:{},
        rules: {
          districtSelected: [
            {required: true, message: '请选择所属片区', trigger: 'change' }
          ],
          areaSelected:[
            {required: true, message: '请选择所属小区', trigger: 'change'}
          ],
          buildingSelected:[
            {required: true, message: '请选择楼栋名称', trigger: 'change'}
          ],
          cellSelected:[
            {required: true, message: '请选择单元名称', trigger: 'change'}
          ],
          floorSelected:[
            {required: true, message: '请选择楼层名称', trigger: 'change'}
          ],
          purposeSelected:[
            {required: true, message: '请选择房间用途', trigger: 'change'}
          ],
          room_name:[
            {required: true, message: '请输入房间名', trigger: 'blur'}
          ],
          room_no:[
            {required: true, message: '请输入房间编号', trigger: 'blur'}
          ]
        },
        activeName:"first",
        list:[],
        dialogVisible:false,
        user_type:"",
        userTypeList:[
          {label:"业主",value:1},
          {label:"家人",value:2},
          {label:"朋友",value:3},
          {label:"租客",value:4},
        ],
        user_type2:2,
        user_id:"",
        personLiableDialog:false,
        areaId:"",
        r_kw:"",
        dutyDlgList:[],
        dutyDlgListLoading:false,
        dutyDlgProps: {
          children: 'children',
          label: 'user_name'
        },
        i:0,
        user_sex:1,
        userDetail:{}
      }
    },
    components: {
        
    },
    created(){
      this.type = this.$route.query.type;
      this.id = this.$route.query.id;
      this.areaId= this.$route.query.areaId;
    
      if(this.type=='update'){ //修改
        this.fetchDetail();
        this.is_modifly = false;
      }

      if(this.type=='add'){
        this.is_modifly = false;
        //optVue.getRoleList(this);//得到角色类型
      }

      if(this.type=='info'){ //修改
        this.fetchDetail();
        this.is_modifly = true;
        this.is_disabled = true;
      }
    },
    filters:{
      userType(val){
        let type={
          1:"业主",
          2:"家人",
          3:"朋友",
          4:"租客",
          5:"游客"
        }
        return type[val];
      }
    },
    methods:{     
     fetchDetail() {
        let vm = this;
        this.loading = true;

        getRoomDetail(this.id)
        .then(response => {
          vm.ruleForm = response.data;

          vm.ruleForm.districtSelected = vm.ruleForm.district_info.value;
          vm.$set(vm.districtList, 0, vm.ruleForm.district_info);

          vm.ruleForm.areaSelected = vm.ruleForm.area_info.value;
          vm.$set(vm.areaList, 0, vm.ruleForm.area_info);

          vm.ruleForm.buildingSelected = vm.ruleForm.building_info.value;
          vm.$set(vm.buildingList, 0, vm.ruleForm.building_info);

          vm.ruleForm.cellSelected = vm.ruleForm.cell_info.value;
          vm.$set(vm.cellList, 0, vm.ruleForm.cell_info);

          vm.ruleForm.floorSelected = vm.ruleForm.floor_info.value;
          vm.$set(vm.floorList, 0, vm.ruleForm.floor_info);

          vm.ruleForm.purposeSelected = vm.ruleForm.purpose+"";
          //vm.$set(vm.purposeList, 0, purposeList);
          vm.loading = false;
        })
        .catch(error => {
          vm.loading = false;
        })
      }, 
      
      clickDistrictSelect() {
        let vm = this;
        if (!vm.districtLoaded) {
          getDistrictList()
          .then(response => {
            vm.districtList = response.data;
            vm.districtLoaded = true;
          })
          .catch(error => {

          })
        }
      },
      changeDistrictSelect() {
        this.areaLoaded = false;
        this.areaSelected = null;
        this.areaList = [];

        this.changeAreaSelect();
      },

      clickAreaSelect(val) {
        let vm = this;
        const params = {
          ril: 'S',
          district_id: vm.ruleForm.districtSelected,
          page_num: 1,
          page_size: 999
        };
        if (!vm.areaLoaded) {
          getAreaList(params)
          .then(response => {
            vm.areaList = response.data.rows;
            vm.areaLoaded = true;
          })
          .catch(error => {

          })
        }
      },
      changeAreaSelect() {
        this.buildingLoaded = false;
        this.buildingSelected = null;
        this.buildingList = [];

        this.changeBuildingSelect();
      },

      clickBuildingSelect(val) {
        let vm = this;
        const params = {
          ril: 'S',
          area_id: vm.ruleForm.areaSelected,
          page_num: 1,
          page_size: 999
        };
        if (!vm.buildingLoaded) {
          getBuildingList(vm.ruleForm.areaSelected, params)
          .then(response => {
            vm.buildingList = response.data.rows;
            vm.buildingLoaded = true;
          })
          .catch(error => {

          })
        }
      },
      changeBuildingSelect() {
        this.cellLoaded = false;
        this.cellSelected = null;
        this.cellList = [];
      },
      clickCellSelect() {
        let vm = this;
        const params = {
          ril: 'S',
          building_id: vm.ruleForm.buildingSelected,
          page_num: 1,
          page_size: 999
        };
        if (!vm.cellLoaded) {
          getCellList(vm.ruleForm.areaSelected, params)
          .then(response => {
            vm.cellList = response.data.rows;
            vm.cellLoaded = true;
          })
          .catch(error => {

          })
        }
      },
      changeCellSelect() {
        this.floorLoaded = false;
        this.floorSelected = null;
        this.floorList = [];
      },
      clickFloorSelect() {
        let vm = this;
        const params = {
          ril: 'S',
          cell_id: vm.ruleForm.cellSelected,
          page_num: 1,
          page_size: 999
        };
        if (!vm.floorLoaded) {
          getFloorList(vm.ruleForm.areaSelected, params)
          .then(response => {
            vm.floorList = response.data.rows;
            vm.floorLoaded = true;
          })
          .catch(error => {

          })
        }
      },
      modify(formName){
        let vm = this;
        vm.ruleForm.floor_id = vm.ruleForm.floorSelected;
        vm.ruleForm.purpose = vm.ruleForm.purposeSelected;
        // console.log(vm.ruleForm)
        vm.$refs[formName].validate((valid) => {//验证
          if (valid) {
            vm.loading = true;
            modifyRoom(vm.id, vm.ruleForm)
            .then(response => {
              vm.$message.success("执行成功！");
              vm.loading = false;
              vm.onBack();
            })
            .catch(error=> {
              vm.loading = false;
            });
          } else {
            vm.$message.error("执行失败！");
            return false;
          }
        });
      },
      create(formName){
        let vm = this;
        vm.ruleForm.area_id = vm.ruleForm.areaSelected;
        vm.ruleForm.floor_id = vm.ruleForm.floorSelected;
        vm.ruleForm.purpose = vm.ruleForm.purposeSelected;
        vm.$refs[formName].validate((valid) => {//验证
        if (valid) {
            vm.loading = true;
            createRoom(vm.ruleForm)
            .then(response => {
              vm.$message.success("执行成功！");
              vm.loading = false;
              vm.onBack();
            })
            .catch(error=> {
              vm.loading = false;
            });
          } else {
            vm.$message.error("执行失败！");
            return false;
          }
        }); 
      },
      onBack(){
        let vm=this;
        window.localStorage.setItem('pageNum',vm.$route.query.pageNum||1);
        vm.$router.go(-1);
      },
      handleClick(tab, event) {
        if(tab.name=='second'){
          this.ongetResidentList();
        }
      },
      ongetResidentList(){//拉取住户信息
        getResidentList(this.id).then(response => {
          let res=response.data;
          this.list=res;
        }).catch(error => {
        })
      },
      ondeleteResident(user_id){//删除住户
        this.$confirm('此操作将移除该住户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteResident(user_id,this.id,1).then(response => {
            this.$message.success("执行成功！");
            this.ongetResidentList();
          }).catch(error => {
            this.$message.error("执行失败！"+error.response.data.error_msg);
          })
        }).catch(() => {        
        });
      },
      showdialog(user_id){
        this.dialogVisible=true;
        this.user_id=user_id;
        getUserDetail(user_id).then(response => {
          let res=response.data;
          this.userDetail=res;
        }).catch(error => {
        })
      }, 
      onupdateUser(){
        let vm=this;
        vm.userDetail.user_type=vm.userDetail.resident_type;
        updateUser(vm.user_id,vm.userDetail).then(response => {
          vm.$message.success("执行成功！");
          vm.ongetResidentList();
          vm.dialogVisible=false;
        }).catch(error => {
          vm.$message.error("执行失败！"+error.response.data.error_msg);
        })
      },
      showUser(){
        this.fetchStaff();
        this.personLiableDialog=true;
      },
      fetchStaff() {
        let vm = this;
        vm.dutyDlgListLoading = true;
        let params = {
          keyword:vm.r_kw,
          area_id:vm.areaId,
          type:1
        };
        getUserInfo(params)
        .then(response => {
          vm.dutyDlgList = response.data;
          vm.dutyDlgListLoading = false;
        })
        .catch(error => {
          vm.dutyDlgListLoading = false;
        })
      },
      onChange(a,b,c){
        let vm=this; 
        vm.i++;
        if(vm.i%2==0){
          if(b){
            vm.$refs.dutyDlg.setCheckedKeys([]);
            vm.$refs.dutyDlg.setCheckedKeys([a.user_id]);
          }else{
            vm.$refs.dutyDlg.setCheckedKeys([]);
          }
        }
      },
      renderContent:function(createElement, { node, data, store }) {
        var vm = this;
        return createElement(
          'div', 
          {
            attrs:{
              style:"width:100%",
            }
          },
          [
            createElement('span', node.data.user_name),
            createElement('span', 
              {attrs:{
                style:"float: right; margin-right: 20px"
              }},
              `${node.data.phone}`
            )
          ]
        );
      },
      onAssignSub(){
        let vm=this,params={};
        var pl = vm.$refs.dutyDlg.getCheckedNodes();
        if (pl.length > 0) {
          vm.sb_userid=pl[0].user_id;
          vm.sbName = pl[0].user_name;
          vm.phone = pl[0].phone;
          params={
            user_name:pl[0].user_name,
            phone:pl[0].phone,
            user_type:vm.user_type2
          }
          addUser(vm.id,params,1).then(response => {
            vm.$message.success("执行成功！");
            vm.personLiableDialog=false;
            vm.ongetResidentList();
          }).catch(error => {
            vm.$message.error("执行失败！"+error.response.data.error_msg);
          })
        }else{
          vm.$message.info("请选择住户");
        }
      }, 
      onSearchExaminer(){
        this.fetchStaff();
      }, 
    }
  
  }


</script>



